Kurzanleitung: Webinhalte auf Barrierefreiheit überprüfen

Anmerkung

Diese Ressource wurde entwickelt, um als einseitige PDF-Datei gedruckt zu werden. Eine HTML-Version steht ebenso zur Verfügung.

Überprüfung mit WAVE

WAVE (wave.webaim.org) ist ein Barrierefreiheits-Evaluierungstool, welches innerhalb Ihres Webinhalts ein Feedback zur Barrierefreiheit von diesem anzeigt.
Dynamische oder geschützte Inhalte können mit der WAVE Firefox-Toolbar evaluiert werden (wave.webaim.org/toolbar).
Klicken Sie auf ein Symbol, um das entsprechende Element zu markieren und weitere Informationen zu erhalten.

Wenn Sie Safari benutzen, aktivieren Sie zuerst diese Einstellung: Safari > Einstellungen > Erweitert > Häkchen bei „Über Tabulator jedes Objekt auf einer Webseite hervorheben„.
Navigieren Sie nur mit der Tastatur über die Seite (Tab, Shift + Tab, Eingabe, etc.). Sind alle Funktionen verfügbar?
Ist ein „skip navigation“ -Hyperlink verfügbar? Aktivieren Sie den Skip-Link und drücken Sie „Tab“ erneut, um sicherzustellen, dass dieser korrekt funktioniert (siehe webaim.org/techniques/skipnav/).
Stellen Sie sicher, dass die Navigationsreihenfolge logisch ist.
Ist ein sichtbarer Tastaturfokus- Indikator/Umriss vorhanden?
Überprüfen Sie die Dialogboxen, die sich öffnen. Sie sollten in der Lage sein, diese unter Benutzung der Tastatur zu steuern sowie zu schließen. Ebenso sollte Esc diese Boxen schließen.

Klicken Sie auf die Formularbeschriftung. Wenn das Feld fokussiert wird, ist es ordnungsgemäß beschriftet.
Wenn eine Beschriftung nicht sichtbar ist, suchen Sie nach einer versteckten Beschriftung oder einem beschreibenden Titel-Attribut.
Stellen Sie sicher, dass Sie alle Formulare per Tastatur vervollständigen können.
Sind Fehler-Wiederherstellungsmechanismen vorhanden und einfach zu benutzen?
Verwenden Sie in WAVE das Code-Panel, um die <label>for und <input>id -Werte zu sehen.

Deaktivieren Sie Styles und entfernen Sie Tabellen, sodass die visuelle Lesereihenfolge mit der Code-Reihenfolge übereinstimmt. Um dies in WAVE zu tun, wählen sie die „No Styles“-Ansicht aus.
- Stellen Sie sicher, dass die Lesereihenfolge logisch ist.
- Stellen Sie sicher, dass der Inhalt verständlich und benutzbar ist.

Stellen Sie sicher, dass der alternative Text Inhalt und Funktion des Bildes vermittelt. Dieser sollte prägnant, präzise und sinnvoll sein.
Stellen Sie bei der Benutzung der Webentwickler-Toolbar oder von WAVE sicher, dass der alternative Text gleichbedeutend ist und im Kontext Sinn macht. In WAVE wird der alternative Text neben dem Bild angezeigt.
Suchen Sie nach Bildern des Textes, bei welchen die gleiche Darstellung mit echtem Text erreicht werden kann.

Kontrast: webaim.org/resources/contrastchecker/ oder in WAVE.
- AA Level: 4.5:1 oder 3:1 für großen Text (18pt/14pt fettgedruckt).
- Wenn Hyperlinks nicht unterstrichen sind, muss ein 3:1 Kontrastverhältnis zwischen Linktext und Text vorhanden sein, alle Texte müssen noch weitere Kontrastanforderungen erfüllen. Es müssen zusätzliche Veränderungen (z.B. Unterstriche) vorhanden sein, wenn sich die Maus darüber befindet oder sie im Tastaturfokus stehen.
Stellen Sie sicher, dass Farbe nicht als alleinige Methode zur Vermittlung von Inhalten oder zur Unterscheidung von visuellen Elementen benutzt wird.
Drucken Sie auf einem Graustufen-Drucker, um Kontrast und Farbe zu testen.

Vergrößern Sie die Schrift in ihrem Web-Browser auf ~150%. Beachten Sie, dass die WCAG 2.0 200% erfordert. Ist die Seite lesbar und benutzbar? Ist das horizontale Scrollen minimiert?
- Safari: Zoomen > Nur Text zoomen
- Firefox: Ansicht > Zoom > Nur Text zoomen
- Internet Explorer: Einstellungen > Zoom
Vergrößern Sie die Webseite in Ihrem Browser ( Schrift und Bilder vergrößern). Ist der Text in Bildern lesbar?

Stellen Sie sicher, dass die Hauptüberschrift auf der Seite eine <h1> ist.
Suchen Sie nach überspringenden Reihenfolgen (z.B. <h2> zu <h4>).
In WAVE: Überschriften können auch in der Registerkarte „Outline“ in der Seitenleiste angezeigt werden.

Konzentrieren Sie sich auf Navigation, Formulare und dynamische Inhalte.
WebAIM Tutorials: webaim.org/articles/jaws/, webaim.org/articles/nvda/ und webaim.org/articles/voiceover.

Nicht zwingend erforderlich, aber empfehlenswert

Überprüfen Sie Videos und andere Multimediainhalte auf Bildunterschriften und Transkripte.
Stellen Sie sicher, dass der Seiten- <title> einzigartig und beschreibend ist.
Achten Sie auf Hyperlinks mit generischen Linktexten wie „hier klicken“.
Stellen Sie sicher, dass die Seitensprache angegeben ist (z.B. <html lang=“en“>).
Stellen Sie sicher, dass sich Anweisungen nicht auf Form, Größe oder Platzierung verlassen.
Stellen Sie sicher, dass Animationen oder Aktualisierungen des Inhalts oder der Medien pausiert und angehalten werden können.
Suchen Sie nach stroboskopischen Inhalten, die Anfälle verursachen können.